// Styles for the generic elements included in every page through the templates.

body {
  color: $foreground-color;
  background-color: $background-color;
}

header {
  background-color: $header-bg-color;
  border-bottom: 1px solid $edge-color;

  nav {
    display: flex;
    flex-flow: row nowrap;
  }
}

// structure: div#topnav > ul > li.nav-dropdown-container > a + ul.nav-dropdown > li

#topnav {
  display: flex;
  flex-basis: auto;
  flex-grow: 1;
  align-items: center;

  #mobile-nav-menu-button {
    display: none;
  }

  ul {
    display: block;
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
    font-size: 85%;

    a {
      text-decoration: none;
      color: $card-button-link-color;

      &:hover {
        color: $card-button-link-hover-color;
      }
    }

    li {
      margin: 0 0.5rem;
      //font-weight: 700;
      display: inline-block;
      position: relative;
    }

    .nav-dropdown-container {
      a {
        margin-right: 0.3rem;
      }

      i {
        margin-left: 2px;
      }
    }

    .nav-link {
      cursor: pointer;
    }

    .nav-dropdown {
      display: none;
      z-index: 100;

      box-sizing: border-box;
      white-space: nowrap;
      overflow-y: auto;
      position: absolute;
      margin-left: -0.4rem;
      top: 100%;

      padding: 0.5rem 0.8rem;
      border: 1px solid $overlay-edge-color;
      background-color: $header-bg-color;
      opacity: 0.93;

      li {
        display: block;
      }
    }

    .nav-dropdown-container:hover .nav-dropdown, .nav-dropdown:hover {
      display: block;
    }
  }

  @media screen and (max-width: $breakpoint) {
    // All the fun for the stacked mobile version of the nav menu.

    #mobile-nav-menu-button {
      display: block;
      font-size: 150%;
      margin: 0 0 0 auto;
      cursor: pointer;
    }

    > ul {
      display: none;
      position: absolute;
      top: 80px; // this is the header height
      right: 0.2rem;
      background-color: $header-bg-color;
      border: 1px solid $overlay-edge-color;
      z-index: 100;

      li {
        display: block;
      }

      .nav-link {
        cursor: inherit;
      }

      .nav-dropdown {
        display: block;
        position: inherit;
        border: none;
        padding-top: 0;
        padding-bottom: 0;
      }

      .nav-dropdown-container i {
        display: none;
      }
    }

    #mobile-nav-menu-button:hover + ul, ul:hover {
      display: block;
    }
  }
}

.header-logo {
  margin: 8px 0;
}

footer {
  font-size: 80%;
  border-top: 1px solid $edge-color;
  color: $muted-color;

  a {
    color: $muted-link-color;

    &:hover {
      color: $muted-link-hover-color;
    }
  }

  #footer-top {
    display: flex;
    flex-flow: row nowrap;
    flex-basis: auto;
    align-items: center;

    p {
      flex-grow: 1;
    }

    a.footer-icon {
      display: block;
      width: 20px;
      height: 20px;
      margin: 0 4px;
      font-size: 20px;
      padding: 0;

      i {
        margin: 0;
      }
    }
  }

  #footer-logo-text {
    width: 100%;
    margin: 0.8rem 0 0.2rem 0;
    text-align: center;
    font-style: italic;
  }

  #logos {
    margin-bottom: 1rem;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;

    img {
      margin: 0.2rem 1rem;
      padding: 2px;
      height: 48px;
    }
  }
}
